
$browser-default-font-size: 65px !default;

$text-red:#f2214d;
$round: 0!default;

$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default;

$pink:#FF7372;
$black:#4A4A4A;
$mainColor:#737373;
$mainView:1250px;

@function pxTorem($px){
  @return $px / $browser-default-font-size * 1rem;
}

@mixin transY($px){
  -webkit-transform: translate3d(0,$px,0);
  transform: translate3d(0,$px,0);
}

@mixin transX($px){
  -webkit-transform: translate3d($px,0,0);
  transform: translate3d($px,0,0);
}

@mixin hand() {
  cursor: pointer;
}

@mixin lah($h) {
  height: $h;
  line-height: $h;
}

@mixin hasLeftSide() {
  width: $mainView;
  // padding-left: 240px;
  position: relative;
  margin:0 auto 50px;
  // min-height: 877px;
}
@mixin mainRouteView(){
  position: absolute;
  top: 88px;
  left: 260px;
}

@mixin rounded($amount) {
  -moz-border-radius: $amount;
  -webkit-border-radius: $amount;
  border-radius: $amount;
}

@mixin pxRadius($color,$radius) {
  border: 1px solid $color;
  @include rounded($radius);
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

@mixin pxBorderLeftRight($color,$position) {
  content: " ";
  position: absolute;
  #{$position}: 0;
  top: 0;
  width: 1px;
  height: 100%;
  border-#{$position}: 1px solid $color;
  color: $color;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}

@mixin pxBorderTopBottom($color,$position) {
  content: " ";
  position: absolute;
  left: 0;
  #{$position}: -1px;
  width: 100%;
  height: 1px;
  border-#{$position}: 1px solid $color;
  color: $color;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

@mixin pxBorder($color){
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid $color;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

@mixin pxBorderTopBom($color,$position){
  content: '';
  position: absolute;
  #{$position}: 0;
  background: $color;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

@mixin inputPlaceholder($key,$value){
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    #{$key} :$value;
  }
  input:-moz-placeholder, textarea:-moz-placeholder {
    #{$key} :$value;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    #{$key} :$value;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    #{$key} :$value;
  }
}


@mixin WHLH($width,$height){
  width: $width;
  height: $height;
  text-align: center;
  line-height: $height;
}

@mixin tranformCenter(){
  left:50%;
  -webkit-transform: translate3d(-50%,0,0);
  transform: translate3d(-50%,0,0);
}

@mixin WH($width){
  width: $width;
  height: $width;
}

@mixin autoCenter{
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

@mixin rounder-side($tl,$tr,$bl,$br){
  -moz-border-radius: $tl $tr $bl $br;
  -webkit-border-radius: $tl $tr $bl $br;
  border-radius: $tl $tr $bl $br;
}

@mixin buttonRadius($tl){
  -moz-border-radius: $tl;
  -webkit-border-radius: $tl;
  border-radius: $tl;
}

@mixin height($height){
  height: $height;
  line-height: $height;
}

@mixin prefixer ($property, $value, $prefixes) {
  @each $prefix in $prefixes {

    @if $prefix == webkit and $prefix-for-webkit == true {
      -webkit-#{$property}: $value;
    }
    @else if $prefix == moz and $prefix-for-mozilla == true {
      -moz-#{$property}: $value;
    }
    @else if $prefix == ms and $prefix-for-microsoft == true {
      -ms-#{$property}: $value;
    }
    @else if $prefix == o and $prefix-for-opera == true {
      -o-#{$property}: $value;
    }
    @else if $prefix == spec and $prefix-for-spec == true {
      #{$property}: $value;
    }
    @else {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

@mixin skewX($degrees) {
  @include prefixer(transform, skewX($degrees), webkit moz o ms spec);
  -webkit-backface-visibility: hidden;
}

@mixin wordEllipsisNum($lineNum){
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lineNum;
}

@mixin wordEllipsis(){
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@mixin triangleArrowup($tb,$lr,$color){
  border-top: $tb solid transparent;
  border-bottom: $tb solid $color;
  border-left: $lr solid transparent;
  border-right: $lr solid transparent;
}